import { useEffect, useRef } from 'react'
import { RiBookmark3Fill } from '@remixicon/react'
import List, { ListRef } from '@/library/gallery/components/List'

export default function DemoButton(): React.ReactNode {
  const refList = useRef<ListRef>(null)

  useEffect(() => {
    if (refList.current) {
      console.info(refList.current.nativeElement)
    }
  }, [])

  return (
    <div style={{ backgroundColor: '#eee'}}>
      <List header="基础用法" ref={refList}>
        <List.Item>1</List.Item>
        <List.Item>2</List.Item>
        <List.Item>3</List.Item>
      </List>

      <List header="可点击列表">
        <List.Item prefix={<RiBookmark3Fill />} arrow={false} extra="未开启" onClick={() => { console.info('点击事件--账单') }}>
          账单
        </List.Item>
        <List.Item prefix={<RiBookmark3Fill />} extra="未开启" onClick={() => { console.info('点击事件--总资产') }}>
          总资产
        </List.Item>
        <List.Item prefix={<RiBookmark3Fill />} onClick={() => { console.info('点击事件--设置') }}>
          设置
        </List.Item>
      </List>
      <List header="title">
        <List.Item title="标题" prefix={<RiBookmark3Fill />}>
          账单
        </List.Item>
        <List.Item title="标题" prefix={<RiBookmark3Fill />}>
          总资产
        </List.Item>
        <List.Item title="标题" prefix={<RiBookmark3Fill />}>
          设置
        </List.Item>
      </List>
      <List header="description">
        <List.Item description="不存在onClick事件 默认没有点击事件阴影 也没有箭头" prefix={<RiBookmark3Fill />}>
          账单
        </List.Item>
        <List.Item description="即使存在onClick 也可以设置没有箭头 但是存在点击事件阴影" prefix={<RiBookmark3Fill />} arrow={false} onClick={() => {}}>
          总资产
        </List.Item>
        <List.Item description="这是一句描述~" prefix={<RiBookmark3Fill />} clickable>
          设置
        </List.Item>
      </List>
      <List header="复杂列表">
        {/* <List.Item extra={<Switch defaultChecked />}>新消息通知</List.Item> */}
        <List.Item extra="未开启" clickable>
          xxx模式
        </List.Item>
        <List.Item description="管理已授权的产品和设备" clickable>
          授权管理
        </List.Item>
        <List.Item title="副标题信息A" description="副标题信息B" clickable>
          这里是主信息
        </List.Item>
      </List>
      <List header="禁用状态">
        <List.Item disabled clickable prefix={<RiBookmark3Fill />}>
          账单
        </List.Item>
        <List.Item disabled onClick={() => { console.info('禁用点击无效') }} prefix={<RiBookmark3Fill />}>
          总资产
        </List.Item>
      </List>
      <List mode="card" header="卡片列表">
        <List.Item extra="按照支付设置的顺序扣款" onClick={() => { console.info('扣款方式') }}>
          扣款方式
        </List.Item>
        <List.Item extra="200元" onClick={() => { console.info('月限额') }}>
          月限额
        </List.Item>
        <List.Item onClick={() => {}}>帮助中心</List.Item>
        <List.Item onClick={() => {}}>关闭服务</List.Item>
      </List>
    </div>
  )
}
